<template>
  <div>
    <h1>组合红包</h1>
    <!-- 
      VueRouter@3 动态添加路由的方法有两个：
          addRoute()
          addRoutes()   一次添加多条路由

      VueRouter@4 addRoutes() 被删除了

     -->
    <hr />
    <button @click="fn0">跳转到 /abcd</button>
    <button @click="fn1">动态添加路由</button>
    <button @click="fn2">动态删除路由</button>
    <button @click="fn3">动态添加嵌套路由</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn0() {
      this.$router.push('/abcd')
    },

    fn1() {
      this.removeRoute = this.$router.addRoute({
        path: '/abcd',
        name: 'abcd',
        component: () => import('./Abcd.vue')
      })
    },

    fn2() {
      /**
       * 删除一条路由有两种方式：
       *    1. 如果该路由是通过 addRoute 动态添加的话，则可以调用 addRoute() 的返回值函数来删除它
       *    2. 调用 router.removeRoute() 按照路由名称来删除
       */
      // this.$router.removeRoute('login')

      this.removeRoute()
    },

    fn3() {
      // 动态添加嵌套路由，则使用 addRoute() 传递两个参数
      //    第一个参数：父路由的name
      //    第二个参数：路由信息
      this.$router.addRoute('home', {
        path: 'abcd',
        component: () => import('./Abcd.vue')
      })
    }
  }
}
</script>
